<script lang="ts" setup>
import {} from 'vue'
import { ElPageHeader } from 'element-plus'
import { useTabsStore } from '/@/store/modules/tabs'
import { JSX } from 'vue/jsx-runtime'

const props = withDefaults(
  defineProps<{
    back?: boolean
    queryLeftSpan?: number
    queryRightSpan?: number
    header?: boolean
    content?: string
    title?: string
    closeTag?: boolean
  }>(),
  {
    back: true,
    query: false,
    header: true,
  }
)

const tabsStore = useTabsStore()
const router = useRouter()
const handleBack = () => {
  if (props.closeTag) {
    tabsStore.delVisitedRoute(router.currentRoute.value.path)
  }
  router.go(-1)
}

const { content, title, back } = props

const slots = defineSlots<{
  default: () => JSX.Element
  queryLeft: () => JSX.Element
  queryRight: () => JSX.Element
  content: () => JSX.Element
}>()
const isExistenceQuery = computed(() => {
  return !!slots.queryLeft || !!slots.queryRight
})
</script>

<template>
  <div class="full flex flex-col p-b-24px no-background-container">
    <div class="bg-white p-20px mb-10px rd-5px flex-1 overflow-hidden flex flex-col">
      <template v-if="props.header">
        <ElPageHeader
          :class="{
            'hidden-back': !back,
          }"
          @back="handleBack"
        >
          <template v-if="title" #content>
            <span class="text-large font-600 mr-3">{{ title }}</span>
            <span class="text-12px">{{ content }}</span>
            <span class="text-12px">
              <slot name="content"></slot>
            </span>
          </template>
          <div></div>
        </ElPageHeader>
      </template>
      <div>
        <VabQueryForm v-if="isExistenceQuery">
          <VabQueryFormLeftPanel :span="props.queryLeftSpan ? props.queryLeftSpan : props.queryRightSpan ? 24 - props.queryRightSpan : 12">
            <slot name="queryLeft"></slot>
          </VabQueryFormLeftPanel>
          <VabQueryFormRightPanel :span="props.queryRightSpan ? props.queryRightSpan : props.queryLeftSpan ? 24 - props.queryLeftSpan : 12">
            <slot name="queryRight"></slot>
          </VabQueryFormRightPanel>
        </VabQueryForm>
      </div>
      <div class="flex-1 relative">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
:deep() {
  .hidden-back {
    .el-page-header__header {
      .el-page-header__left {
        .el-page-header__back {
          display: none;
        }
        .el-divider {
          display: none;
        }
      }
    }
  }
  .el-page-header {
    margin-bottom: 10px;
  }
  .vab-query-form {
    .left-panel {
      margin-bottom: 0;
    }
    .right-panel {
      margin-bottom: 0;
    }
  }
}
</style>
